<template>
	<view class="page">
		<zui-watermark :content="watermarkText" invert color="#666" blend="difference" :opacity="0.15" :cellWidth="180" :cellHeight="120" />
		<view class="nav-style" :style="{ height: navHeight - 15 + 'px', 'padding-top': 15 + 'px', lineHeight: navHeight + 'px', fontWeight: 600, fontSize: 18 + 'px' }">
			<image style="width: 40rpx; height: 40rpx" src="/static/image/back.png" mode="aspectFit" @click="back"></image>
			性伴检测
		</view>
		<view v-if="show" :style="{ marginTop: navHeight + 'px' }">
			<view class="list">
				<view class="child" v-for="(item, index) in tableData" :key="index">
					<view class="top-box" :class="item.selfresult == 1 ? 'bg1' : item.selfresult == 0 ? 'bg2' : 'bg3'">
						<view style="display: flex; align-items: center">
							<view class="pic">
								<image v-if="item.selfresult == 1" src="/static/image/reactive.png" mode="aspectFit"></image>
								<image v-if="item.selfresult == 0" src="/static/image/noreactive.png" mode="aspectFit"></image>
								<image v-if="item.selfresult == 3" src="/static/image/invalid.png" mode="aspectFit"></image>
								<image v-if="item.selfresult == 4" src="/static/image/invalid.png" mode="aspectFit"></image>
							</view>
							<view class="dev">{{ item.deviceno }}</view>
						</view>
						<view class="detail" :class="item.selfresult == 1 ? 'c1' : item.selfresult == 0 ? 'c2' : 'c3'">
							{{ item.selfresult == 1 ? '有反应（待复查）' : item.selfresult == 0 ? '阴性' : item.selfresult == 4 ? '未检测' : '检测未完成' }}
						</view>
					</view>
					<view class="middle-box">
						<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx">
							<view class="sex" style="width: 50%; text-align: left">
								<text style="color: #555555">性别:</text>
								{{ item.sex }}
							</view>
							<view class="age" style="width: 50%; text-align: left">
								<text style="color: #555555">年龄:</text>
								{{ item.age }}
							</view>
						</view>
						<view class="time">
							<text style="color: #555555">检测时间:</text>
							{{ item.resulttime?.slice(0, 10) }}
						</view>
						<view class="address">
							<text style="color: #555555">检测地点:</text>
							{{ item.resultaddress }}
						</view>
					</view>
					<view class="bottom-box">
						<view class="btn1" @click="detail(item, index)">详情</view>
						<view class="btn2" @click="updateSex(item, index)">编辑</view>
					</view>
				</view>
			</view>
			<view v-if="listshow">暂无数据~</view>
		</view>

		<view v-else>
			<view style="background-color: #f4f6f8; padding: 12px 15px">
				<view class="content" :style="{ marginTop: navHeight + 'px' }">
					<view class="one">
						<text class="label">性别</text>
						<uni-data-checkbox v-model="info.sex" :localdata="sex"></uni-data-checkbox>
					</view>
					<view class="one">
						<text class="label">年龄</text>
						<uni-data-picker v-model="info.age" :localdata="age" placeholder=""></uni-data-picker>
					</view>
					<view class="one">
						<text class="label">首次CD4</text>
						<uni-easyinput v-model="info.firstcd4" type="number" placeholder="请输入首次CD4" />
					</view>
					<view class="one">
						<text class="label">首次病毒载量</text>
						<uni-easyinput v-model="info.firstvl" type="number" placeholder="请输入首次病毒载量" />
					</view>
					<view class="one">
						<text class="label" style="width: 80px">新发感染检测结果</text>
						<uni-data-checkbox v-model="info.newresult" :localdata="resOptions"></uni-data-checkbox>
					</view>
					<view class="one">
						<text class="label" style="width: 120px">是否参加过自检或专业机构检测</text>
						<uni-data-checkbox v-model="jiance" :localdata="sfcanyu" @change="change"></uni-data-checkbox>
					</view>
					<view class="one" v-if="this.info.lasttime != '从未检测'">
						<text class="label" style="width: 150px">最近一次的检测阴性时间(含自检或专业机构检测)</text>
						<uni-datetime-picker :disabled="isSelect" :border="false" type="date" placeholder="请选择确诊时间" v-model="info.lasttime" :end="currentDate" />
					</view>
					<view class="one" v-if="this.info.lasttime == '从未检测'">
						<text class="label" style="width: 150px">最近一次的检测阴性时间(含自检或专业机构检测)</text>
						<uni-datetime-picker
							:disabled="isSelect"
							:border="false"
							type="date"
							placeholder="请选择最近一次的检测阴性时间(含自检或专业机构检测)"
							v-model="lasttimetext"
							:end="currentDate"
						/>
					</view>
					<view class="one">
						<text class="label">确证时间</text>
						<uni-datetime-picker :border="false" :end="currentDate" type="date" placeholder="请选择确证时间" v-model="info.diagnosetime" />
					</view>
				</view>
			</view>

			<view class="btn-box" style="display: flex; justify-content: space-between">
				<button class="btn" style="width: 45%" @click="onCancel">取消</button>
				<button class="btn" style="width: 45%" @click="onSubmit">提交</button>
			</view>
		</view>

		<uni-popup ref="Dialog" type="dialog">
			<view class="dialog">
				<image src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png" class="img" mode=""></image>
				<view class="con">
					<view class="title">查看详情</view>
					<view class="info">
						<uni-forms>
							<!-- <uni-forms-item label="序号:">{{info.id}}</uni-forms-item> -->
							<uni-forms-item label="志愿者编号:" label-width="80px">{{ info.seednum }}</uni-forms-item>
							<uni-forms-item label="年龄:">{{ info.age }}</uni-forms-item>
							<uni-forms-item label="性别:">{{ info.sex }}</uni-forms-item>
							<uni-forms-item label="试剂编号:" label-width="80px">{{ info.deviceno }}</uni-forms-item>
							<uni-forms-item label="自检地点:" label-width="80px">{{ info.resultaddress }}</uni-forms-item>
							<uni-forms-item label="首次CD4:" label-width="80px">{{ info.firstcd4 }}</uni-forms-item>
							<uni-forms-item label="首次病毒载量:" label-width="80px">{{ info.firstvl }}</uni-forms-item>
							<uni-forms-item label="确诊时间:" label-width="80px">{{ info.diagnosetime?.slice(0, 10) }}</uni-forms-item>
							<uni-forms-item label="近一次的检测阴性时间(含自检或专业机构检测):" label-width="120px">{{ info.lasttime?.slice(0, 10) }}</uni-forms-item>
							<uni-forms-item label="新发检测结果:" label-width="80px">{{ info.newresult }}</uni-forms-item>
							<uni-forms-item label="自检时间:" label-width="80px">{{ info.resulttime?.slice(0, 10) }}</uni-forms-item>
							<uni-forms-item label="自检结果:" label-width="80px">
								{{ info.selfresult == 1 ? '有反应（待复查）' : info.selfresult == 0 ? '阴性' : info.selfresult == 4 ? '未检测' : '检测未完成' }}
							</uni-forms-item>
						</uni-forms>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { FindLoginUser, getSexList, updateSex } from '../../utils/api.js';
import uuid from '@/js_sdk/com-ls-utils/components/ls-utils/index.js';
export default {
	data() {
		return {
			watermarkText: '',
			statusBarHeight: '',
			navHeight: '',
			currentDate: new Date().toISOString().split('T')[0],
			show: true,
			listshow: false,
			UserId: null,
			lasttimetext: '',
			search: {
				pagenumber: 1,
				pagesize: 10,
				starttime: null,
				endtime: null,
				deviceno: '',
				sex: '',
				seednum: ''
			},
			total: null,
			tableData: [],
			loading: true,
			pages: '',
			info: {},
			Info: {},
			index: null,
			jiance: '',
			isSelect: false,
			resOptions: [
				{
					text: '新发',
					value: '新发'
				},
				{
					text: '既往',
					value: '既往'
				},
				{
					text: '未检测',
					value: '未检测'
				}
			],
			sfcanyu: [
				{
					text: '是',
					value: '是'
				},
				{
					text: '否',
					value: '否'
				}
			],
			sex: [
				{
					text: '男',
					value: '男'
				},
				{
					text: '女',
					value: '女'
				}
			],
			age: Array.from(
				{
					length: 100
				},
				(_, i) => ({
					text: `${i + 1}岁`,
					value: i + 1
				})
			)
		};
	},
	onLoad(op) {
		this.FindLoginUser();
		this.GetList();
		var that = this;
		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		uni.getSystemInfo({
			success: (e) => {
				// this.compareVersion(e.SDKVersion, '2.5.0')
				let statusBar = 0;
				let customBar = 0;
				// #ifdef MP
				statusBar = e.statusBarHeight;
				customBar = e.statusBarHeight + 45;
				if (e.platform === 'android') {
					// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
					customBar = e.statusBarHeight + 50;
				}
				// #endif
				// #ifdef MP-WEIXIN
				statusBar = e.statusBarHeight;
				// @ts-ignore
				const custom = wx.getMenuButtonBoundingClientRect();
				customBar = custom.bottom + custom.top - e.statusBarHeight;
				// #endif

				// #ifdef APP-PLUS
				console.log('app-plus', e);
				statusBar = e.statusBarHeight;
				customBar = e.statusBarHeight + 45;
				// #endif

				// #ifdef H5
				statusBar = 0;
				customBar = e.statusBarHeight + 45;
				// #endif

				// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
				this.statusBarHeight = statusBar;
				this.navHeight = customBar;
			}
		});
	},
	onReachBottom() {
		this.search.pagenumber++;
		if (this.search.pagenumber <= this.pages && this.loading == false) {
			this.GetList();
		}
	},
	methods: {
		change(e) {
			console.log(e);
			if (e.detail.value == '否') {
				this.Info.lasttime = '';
				this.isSelect = true;
				// this.Info.lasttime = "从未检测"
			} else {
				this.Info.lasttime = '';
				this.isSelect = false;
			}
			console.log();
		},
		back() {
			uni.navigateBack();
		},
		changePage(e) {
			this.search.pagenumber = e.current;
			this.GetList();
		},
		async FindLoginUser() {
			const res = await FindLoginUser();
			this.UserId = res.data.userid;
			this.watermarkText = res.data.admininfo.name;
		},
		GetList() {
			uni.showLoading({
				title: '加载中'
			});
			getSexList(this.search)
				.then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.hideLoading();
						this.loading = false; // 没加载
						this.total = res.total;
						this.pages = Math.ceil(this.total / 10); // 总页数
						this.tableData = [...this.tableData, ...res.data];
						if (this.tableData.length) {
						} else {
							this.listshow = true;
						}
					}
				})
				.catch((err) => {
					console.log(err);
				});
			this.loading = true;
		},
		detail(e, index) {
			this.index = index;
			this.info = JSON.parse(JSON.stringify(this.tableData[index]));
			this.$refs.Dialog.open('center');
		},
		updateSex(e, index) {
			console.log(e);
			this.show = false;
			this.index = index;
			this.info = JSON.parse(JSON.stringify(this.tableData[index]));

			if (e.lasttime == '从未检测') {
				this.jiance = '否';
				// this.Info.lasttime = ''
				this.info.lasttime = '';
				this.isSelect = true;
			} else if (e.lasttime == null) {
				this.jiance = '否';
			} else {
				this.jiance = '是';
			}
		},
		onSubmit() {
			if (!this.info.age) {
				this.info.age = 0;
			}
			if (this.jiance == '是') {
				updateSex(this.info)
					.then((res) => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								duration: 2000
							});
							(this.search.pagenumber = 1), (this.tableData = []);
							this.show = true;
							this.GetList();
						}
					})
					.catch((err) => {
						console.log(err);
					});
			} else if (this.jiance == '否') {
				this.info.lasttime = '从未检测';
				updateSex(this.info)
					.then((res) => {
						console.log(res);
						if (res.code == 200) {
							(this.search.pagenumber = 1), (this.tableData = []);
							uni.showToast({
								title: '修改成功',
								duration: 2000
							});
							this.show = true;
							this.GetList();
						}
					})
					.catch((err) => {
						console.log(err);
					});
			}
		},
		onCancel() {
			this.info = JSON.parse(JSON.stringify(this.tableData[this.index]));
			this.show = true;
			console.log(this.tableData);
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	// overflow-x: scroll;

	.nav-style {
		background-image: url('https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png');
		background-size: cover;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		display: flex;
		padding-left: 23rpx;
		align-items: center;
		justify-content: center;

		image {
			position: absolute;
			left: 15px;
		}

		text {
			position: absolute;
			right: 15px;
		}
	}

	.list {
		// overflow: scroll;
		padding: 30rpx;
		border-radius: 12rpx;
		background-color: #f4f6f8;
		// padding-bottom: 60rpx;

		.child {
			border-radius: 12rpx;
			background-color: #fff;
			padding-bottom: 12rpx;
			margin-bottom: 30rpx;

			.bg1 {
				background: linear-gradient(90deg, #ffe5e5 0%, #fff8f8 100%);
			}

			.bg2 {
				background: linear-gradient(90deg, #d4f7e8 0%, #e8fff5 100%);
			}

			.bg3 {
				background: linear-gradient(90deg, #e4ecf0 0%, #f2f7fa 100%);
			}

			.bg4 {
				color: #ff3737;
				background: #ffe5e5;
			}

			.bg5 {
				color: #1fb373;
				background: #c6fbe4;
			}

			.bg6 {
				color: #96a4ab;
				background: #e4edf0;
			}

			.bg7 {
				background: #e1f2ff;
				color: #0090ff;
			}

			.bg8 {
				background: #e1f2ff;
				color: #4a6a83;
			}

			.top-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 24rpx;
				border-radius: 12rpx 12rpx 0 0;

				.pic {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.dev {
					margin-left: 20rpx;
					font-weight: 500;
					font-size: 27rpx;
					color: #222222;
				}

				.detail {
					background: #ffffff;
					border-radius: 19rpx 19rpx 19rpx 19rpx;
					padding: 6rpx 16rpx;
					font-weight: 400;
					font-size: 19rpx;
					// color: #FF3737;
				}
				.c1 {
					color: #ff3737;
				}
				.c2 {
					color: #1fb373;
				}
				.c3 {
					color: #96a4ab;
				}
			}

			.middle-box {
				margin-left: 24rpx;

				.sex,
				.age,
				.time,
				.address {
					line-height: 40rpx;
					margin-top: 16rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
				}
			}

			.bottom-box {
				// margin: 27rpx 0 27rpx 24rpx;
				margin: 30rpx 0;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;

				.btn1,
				.btn2 {
					width: 45%;
					text-align: center;
					// background: #FFFFFF;
					border-radius: 12rpx;
					padding: 15rpx 0;
					font-weight: 400;
					font-size: 32rpx;
				}

				.btn1 {
					border: 1px solid #00aeff;
					color: #00aeff;
				}

				.btn2 {
					background: linear-gradient(90deg, #a4edf1 0%, #00aeff 100%);
					color: #fff;
				}
			}
		}
	}

	.content {
		background-color: #fff;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 20rpx;
		.one {
			height: 84rpx;
			padding: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f4f4f4;

			.label {
				color: #222222;
				font-weight: 500;
				font-size: 28rpx;
			}
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.btn-box {
		background-color: #fff;
		padding: 40rpx;

		.btn {
			// width: 95%;
			height: 105rpx;
			// margin: 100rpx auto 0;
			color: #ffffff;
			font-weight: 500;
			font-size: 40rpx;
			background: linear-gradient(90deg, #a4edf1 0%, #00aeff 100%);
			box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(14, 98, 122, 0.15);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.btn:nth-child(2) {
			background: linear-gradient(90deg, #00aeff 0%, #a4edf1 100%);
		}
	}

	.btnbox {
		display: flex;

		.sign {
			background: linear-gradient(#639cff, #1e64e0);
			margin-top: 20rpx;
			color: #fff;
		}
	}

	.dialog {
		// width: 90%;
		width: 600rpx;
		height: 1000rpx;
		position: relative;
		border-radius: 5px;
		z-index: 99;

		.img {
			width: 100%;
			height: 1000rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 5px;
			z-index: -1;
		}

		.con {
			padding: 30rpx 20rpx;
			z-index: 99;

			.title {
				width: 300rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				font-weight: 600;
			}

			.info {
				margin-top: 30rpx;
				padding: 20rpx;
				width: 520rpx;
				height: 800rpx;
				overflow-y: scroll;
				background-color: #fff;
				opacity: 0.7;
				border-radius: 10px;
			}
		}
	}

	// 输入框
	::v-deep .uni-easyinput__content {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	::v-deep .uni-easyinput__content-input {
		height: 84rpx;
		text-align: right;
	}

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__placeholder-class {
		text-align: right;
	}

	::v-deep .content-clear-icon {
		display: none;
	}

	// 时间选择器
	::v-deep .uni-date-editor {
		text-align: right;
	}

	::v-deep.uni-date-x .uni-date-single {
	}

	::v-deep .icon-calendar {
		position: absolute;
		right: 0 !important;
	}

	::v-deep .uni-date__icon-clear {
		display: none;
	}

	::v-deep .uni-date__x-input {
		margin-right: 50rpx;
	}

	// 下拉框

	::v-deep .selected-area,
	.placeholder,
	.selected-list {
		justify-content: flex-end !important;
		text-align: right !important;
		font-size: 14px;
	}

	::v-deep .input-value-border {
		border: none;
	}

	// 单选框
	::v-deep .checklist-group {
		justify-content: flex-end;
	}

	::v-deep .placeholder {
		text-align: right;
	}

	.uni-forms-item {
		display: flex;
		align-items: center;
	}
}
</style>
